<template>
   <div class="wrapper index-news">
        <div class="container">
            <div class="title">
                <h1 class="ac-title">家装资讯</h1>
                <router-link 
                tag="a" target="_blank"
                :to="{name:'newsList'}"
                class="go">查看更多></router-link>    
           </div>
            <div class="news-body">
                <router-link 
                class="news-item"
                
                :to="{name: 'newsDetail', params: {id:item.id}}" 
                tag="a" target="_blank"
                v-for="item of this.list"
                :key="item.id"
                >
                    <div class="time">
                        <div class="day">{{item.day}}</div>
                        <div class="years">{{item.years}}</div>
                    </div>
                    <div class="item-img"><img :src="item.url" alt=""></div>
                    <h1 class="first_title">{{item.first_title}}</h1>
                    <p class="second_title">{{item.second_title}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexNews',
  data () {
    return {
        msg: 'index',
        id:6,
        list:[],
        url:''
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'cms/news/to_index_news',
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
    //   console.log(response)
      this.list = response.data.data
        for(var i =0;i<this.list.length;i++){
            if(this.list[i].img_url!=null){
                this.url = this.list[i].img_url.url
                // console.log(this.url)
                this.list[i]['url'] = this.url
                let time = this.list[i].create_time.split(" ")[0];
                
                let day = time.substring(5);
                 
                let years =  time.substring(0,4);
                this.list[i]['day'] =  day 
                this.list[i]['years'] =  years
                
            }
                
        }
    // console.log(this.list)
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-news
  margin-top 40px
  margin-bottom 20px
img 
    width 100%
    // height 500px
a
    color black
    display block
.title  
    overflow hidden
.container
    container() 
.title>h1
  title()
.ac-title::after
  titleAfter()
.go
  go()
.news-body
    overflow hidden
.news-item 
    width 380px
    float left
.news-item+.news-item
    margin-left 20px
.time 
    margin-top 14px
    width 100%
    border 1px solid #666666
    height 68px
    overflow hidden
    .day
        float left
        width 240px
        color #149daf
        font-weight bold
        border-right 1px solid #666666
    .years 
        float right
        color #666666
        font-size 24px!important
        width 138px
.time>div 
    height 68px
    line-height 68px
    text-align center
    font-size 40px
.item-img 
    width 380px 
    height 226px
    overflow hidden
    background black
    margin 20px 0
.first_title
    width 100%
    font-size 20px
    text-align left
    margin-bottom 30px
    font-weight bold
.second_title 
    width 100%
    font-size 16px
    color #666666
    margin-bottom 20px
    height 60px
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height 20px
    overflow: hidden;
    flex-direction: column;
</style>
